<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <title><{:C('WEBSET.sitename')}> | <{:L('official_page')}></title>
    <link href="__PUBLIC__/css/bootstrap.min.css" rel="stylesheet">
    <link href="__PUBLIC__/css/font-awesome.min.css" rel="stylesheet">
    <link href="__PUBLIC__/css/prettyPhoto.css" rel="stylesheet">
    <link href="__PUBLIC__/css/main.css" rel="stylesheet">
    <!--[if lt IE 9]>
    <script src="js/html5shiv.js"></script>
    <script src="js/respond.min.js"></script>
    <![endif]-->
    <link rel="shortcut icon" href="images/ico/favicon.ico">
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="__PUBLIC__/images/ico/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="__PUBLIC__/images/ico/apple-touch-icon-114-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="__PUBLIC__/images/ico/apple-touch-icon-72-precomposed.png">
    <link rel="apple-touch-icon-precomposed" href="__PUBLIC__/images/ico/apple-touch-icon-57-precomposed.png">
</head><!--/head-->

<body data-spy="scroll" data-target="#navbar" data-offset="0">
    <header id="header" role="banner">
        <div class="container">
            <div id="navbar" class="navbar navbar-default">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="sr-only"><{:L('navigation')}></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href=""></a>
                </div>
                <div class="collapse navbar-collapse">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="#main-slider"><i class="icon-home"></i></a></li>
                        <li><a href="#services"><{:L('Services')}></a></li>
                        <li><a href="#case"><{:L('Case')}></a></li>
                        <li><a href="#ouraim"><{:L('Ouraim')}></a></li>
                        <li><a href="#contact"><{:L('Contactus')}></a></li>
                    </ul>
                </div>
            </div>
        </div>
    </header><!--/#header-->

    <section id="main-slider" class="carousel">
    	
    	<ol class="carousel-indicators">
    		<foreach name="flashlist" item="fvo" key="fk">
		    	<li data-target="#main-slider" data-slide-to="<{$fk}>" class="<if condition='$fk eq 0'>active</if>"></li>
		    </foreach>
		</ol>
    	
        <div class="carousel-inner">
        	<foreach name="flashlist" item="fvo" key="fk">
	            <div class="item <if condition='$fk eq 0'>active</if>">
	            	<img src="<{$fvo.image}>" alt="<{$fvo.brief}>">
	            </div>
            </foreach>
        </div><!--/.carousel-inner-->
        
        <a class="prev" href="#main-slider" data-slide="prev"><i class="icon-angle-left"></i></a>
        <a class="next" href="#main-slider" data-slide="next"><i class="icon-angle-right"></i></a>
    </section><!--/#main-slider-->

    <section id="services">
        <div class="container">
            <div class="box first">
                <div class="row">
                	<volist name="service" id="svo">
                    <div class="col-md-6 col-sm-6">
                        <div class="center">
                            <img src="<{$svo.icon}>" alt="<{$svo.title}>">
                            <h3><{$svo.title}></h3>
                            <p><{$svo.description}></p>
                            <p><{$svo.content|htmlspecialchars_decode}></p>
                        </div>
                    </div>
                    </volist>
                </div><!--/.row-->
            </div><!--/.box-->
        </div><!--/.container-->
    </section><!--/#services-->

    <section id="case">
        <div class="container">
            <div class="box">
                <div class="center">
                    <h2><{:L('case')}><{:L('show')}></h2>
                </div><!--/.center-->
                <ul class="portfolio-filter">
                    <li><a class="btn btn-primary active" href="#" data-filter="*">All</a></li>
                    <volist name="casetype" id="ctvo">
                    	<li><a class="btn btn-primary" href="#" data-filter=".ct_<{$ctvo.id}>"><{$ctvo.name}></a></li>
                    </volist>
                </ul><!--/#portfolio-filter-->
                <ul class="portfolio-items col-4">
                	<volist name="case" id="cvo">
	                    <li class="portfolio-item ct_<{$cvo.type}>">
	                        <div class="item-inner">
	                            <div class="portfolio-image">
	                                <img src="<{$cvo.image}>" alt="">
	                                <div class="overlay">
	                                    <a class="preview btn btn-danger" href="<{:U('index/cdetail', array('id' => $cvo[id]))}>?ie=UTF-8&oe=UTF-8&q=prettyphoto&iframe=true&width=80%&height=100%"><i class="icon-eye-open"></i></a>             
	                                </div>
	                            </div>
	                            <h5><{$cvo.title}></h5>
	                        </div>
	                    </li><!--/.portfolio-item-->
                    </volist>
                </ul>   
            </div><!--/.box-->
        </div><!--/.container-->
    </section><!--/#portfolio-->

    <section id="ouraim">
        <div class="container">
            <div class="box">
                <div class="center">
                    <h2><{:L('Ourslogan')}></h2>
                </div>
                <div class="gap"></div>
                <!-- add the list -->
                <div class="row">
                    <div class="col-xs-2">
                        <div class="center">
                            <h3>Step1</h3>
                            <h4>探索 / Discover</h4>
                            <p>目标和需求</p>
                            <p>项目计划</p>
                            <p>策略与路线图</p>
                        </div>
                    </div>
                    <div class="col-xs-2">
                        <div class="center">
                            <h3>Step2</h3>
                            <h4>设计 / Design</h4>
                            <p>应用程序流程</p>
                            <p>线框图&交互设计</p>
                            <p>概念&创意</p>
                            <p>品牌&视觉设计</p>
                            <p>用户界面规范</p>
                        </div>
                    </div>
                    <div class="col-xs-2">
                        <div class="center">
                            <h3>Step3</h3>
                            <h4>开发 / Build</h4>
                            <p>架构</p>
                            <p>开发计划</p>
                            <p>前端开发</p>
                            <p>后端开发</p>
                            <p>集成</p>
                        </div>
                    </div>
                    <div class="col-xs-2">
                        <div class="center">
                            <h3>Step4</h3>
                            <h4>部署 / Deploy</h4>
                            <p>QA & 测试</p>
                            <p>Bug修复</p>
                            <p>App提交</p>
                        </div>
                    </div>
                    <div class="col-xs-2">
                        <div class="center">
                            <h3>Step5</h3>
                            <h4>改善 / Imporve</h4>
                            <p>分析 Analysis</p>
                            <p>用户体验&代码改进</p>
                            <p>后续支持</p>
                        </div>
                    </div>
                </div><!--/.row-->
            </div><!--/.box-->
        </div><!--/.container-->
    </section><!--/#about-us-->

    <section id="contact">
        <div class="container">
            <div class="box last">
                <div class="row">
                    <div class="col-sm-6">
                        <h1><{:L('leavemessage')}></h1>
                        <p><{:L('contactinfo')}></p>
                        <form id="main-contact-form" class="contact-form" name="contact-form" method="post" action="<{:U('Index/sendmessage')}>" role="form">
                            <div class="row">
                                <div class="col-sm-8">
                                    <div class="form-group">
                                        <input type="text" name="name" class="form-control" required="required" placeholder="<{:L('name')}>">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <input type="email" name="email" class="form-control" placeholder="<{:L('email')}>">
                                    </div>
                                </div>
                                
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <input type="text" name="QQ" class="form-control" placeholder="<{:L('QQ')}>">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-12">
                                    <div class="form-group">
                                        <textarea name="message" id="message" required="required" class="form-control" rows="8" placeholder="<{:L('message')}>"></textarea>
                                    </div>
                                    <div class="form-group">
                                        <button type="submit" class="btn btn-danger btn-lg"><{:L('sendmessage')}></button>
                                    </div>
                                    <div class="check-tips"></div>
                                    <div class="check-tips-success"></div>
                                </div>
                            </div>
                        </form>
                    </div><!--/.col-sm-6-->
                    <div class="col-sm-6">
                        <h1><{:L('Contactus')}></h1>
                        <div class="row">
                            <div class="col-md-6">
                                <ul class="social">
                                    <li><a href="#"><i class="icon-facebook icon-social"></i> Facebook</a></li>
                                    <li><a href="#"><i class="icon-google-plus icon-social"></i> Google Plus</a></li>
                                    <li><a href="#"><i class="icon-pinterest icon-social"></i> Pinterest</a></li>
                                </ul>
                            </div>
                            <div class="col-md-6">
                                <ul class="social">
                                    <li><a href="#"><i class="icon-linkedin icon-social"></i> Linkedin</a></li>
                                    <li><a href="#"><i class="icon-twitter icon-social"></i> Twitter</a></li>
                                    <li><a href="#"><i class="icon-youtube icon-social"></i> Youtube</a></li>
                                </ul>
                            </div>
                        </div>
                        <h3><{:L('friendlink')}></h3>
                        <div class="row">
                        	<volist name="linklist" id="llvo">
	                            <div class="col-md-4 link">
	                                <a href="<{$llvo.url}>" target="_blank"><{$llvo.name}></a>
	                            </div>
                            </volist>
                        </div>
                    </div><!--/.col-sm-6-->
                </div><!--/.row-->
            </div><!--/.box-->
        </div><!--/.container-->
    </section><!--/#contact-->

    <footer id="footer">
        <div class="container">
            <div class="row">
                <div class="col-sm-6">
                    &copy; 2014 <a href="#"><{:C('WEBSET.sitename')}></a>. All Rights Reserved.
                </div>
                <div class="col-sm-6">
                    <img class="pull-right" src="__PUBLIC__/images/shapebootstrap.png" alt="ShapeBootstrap" title="ShapeBootstrap">
                </div>
            </div>
        </div>
    </footer><!--/#footer-->

    <script src="__PUBLIC__/js/jquery.js"></script>
    <script src="__PUBLIC__/js/bootstrap.min.js"></script>
    <script src="__PUBLIC__/js/jquery.isotope.min.js"></script>
    <script src="__PUBLIC__/js/jquery.prettyPhoto.js"></script>
    <script src="__PUBLIC__/js/main.js"></script>
    
</body>
</html>